/* 内河涌 弹框 河涌巡查信息页 
 * @ 劳兆城 
 * @ 2017-08-11*/

<template>
	<div class="water-patrol clear">
		<div class="water-patrol-table pull-left">
			<div class="table">
				<Table 
					@on-row-click="rowClick" 
					:columns="table.thead" 
					:data="table.tbody" 
					size="small" 
					highlight-row 
					border></Table>				
			</div>
			<div class="page">
				<Page 
					:total="table.total" 
					@on-change="pageChange" 
					size="small" 
					show-total></Page>				
			</div>
		</div>
		<div class="water-patrol-img pull-left">
			<loading type="circular" v-show="showLoading"></loading>
			<img 
				v-show="water.oriimgpath" 
				:src="`http://183.238.82.210:8090/ztwater/fileupdown.viewzoomimage.d?picname=${water.oriimgpath}`" />
			<img 
				v-show="!water.oriimgpath || havePicture" 
				src="../../img/aPictureNoPicture.png" />
		</div>
	</div>
</template>

<script>
	import { loadingMixin } from 'common/js/mixins'
import { singleWaterNetPatrol } from 'common/js/table'

export default {
		mixins: [loadingMixin],
		computed: {
			havePicture () {
				return JSON.stringify(this.water) === '{}'
		}
		},
		created () {
			this.page = 1
	},
		data () {
			return {
				water: {},
				table: {
					thead: singleWaterNetPatrol(this),
					tbody: [],
					total: null
				},
				showLoading: false
			}
		},
		methods: {
			rowClick (row) {
	
			},
			pageChange (page) {
	
			}
		}
	}
</script>

<style scoped lang="scss">
	.singleWaterNet-model {
		.water-patrol {
			width: 100%;
			height: 100%;
			padding: 0 5px;
			.water-patrol-table {
				width: calc(60% - 10px);
				height: 100%;
				position: relative;
				margin-right: 10px;
				.table {
					width: 100%;
					position: absolute;
					top: 15px;
					left: 0;
				}
				.page {
					position: absolute;
					bottom: 5px;
					right: 5px;
				}
			}
			.water-patrol-img {
				width: 40%;
				height: 100%;
				padding-top: 15px;
				padding-bottom: 15px;
				padding-right: 10px;
				position: relative;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>